<template>
  <transition name="animation">
    <div class="my-swiper-item" v-show="isShow">
      <slot></slot>
      <span class="imgName">{{ name }}</span>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'mySwiperItem',
  data () {
    return {
      selected: ''
    }
  },
  computed: {
    isShow () {
      return this.selected === this.name
    }
  },
  props: {
    name: {
      type: String,
      require: true
    }
  },
  mounted () {
    console.log('bbb', this.name)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
.my-swiper-item
  height 100%
  .imgName
    position absolute
    z-index 10
    bottom 10px
.animation-enter-active,
.animation-leave-active
  transition all 1s linear
.animation-enter
  transform translate(100%)
.animation-leave-to
  transform translate(-100%)
.animation-enter-active
  position absolute
  left 0
  top 0
</style>
